<template>
    <div class="main-content">
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="formInline" ref="formInline" label-width="40px">
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="年级">
                                <el-select v-model="formInline.grade" placeholder="请选择年级" @change="changeGrade"
                                        style="width:100%">
                                    <el-option v-for="(item,index) in gradeArr" 
                                    :key="index" :label="item.name" :value="item.code"> 
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="科目">
                                <el-select v-model="formInline.subject" placeholder="请选择科目" @change="changeSubject"
                                style="width:100%">
                                    <el-option v-for="(item,index) in subjectArr" 
                                    :key="index" :label="item.summaryName" :value="item.summaryCode"> 
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="教材">
                                <el-select v-model="formInline.edition" placeholder="请选择教材" 
                                style="width:100%">
                                    <el-option v-for="(item,index) in bookArr" 
                                    :key="index" :label="item.textBook" :value="item.textBookId"> 
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row> 
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="日期"> 
                                <el-row>
                                    <el-col :span="11">
                                        <el-date-picker v-model="formInline.giveTimeStart" :clearable='true' :editable="false" type="date" placeholder="选择开始日期" 
                                            :picker-options="formInline.pickerOptions1" 
                                            @change="startDateChange" style="width:100%">
                                        </el-date-picker>
                                    </el-col>
                                    <el-col :span="2" align="center">-</el-col>
                                    <el-col :span="11">
                                        <el-date-picker v-model="formInline.giveTimeEnd" :clearable='true' :editable="false" type="date" placeholder="选择结束日期" 
                                            :picker-options="formInline.pickerOptions2" 
                                            @change="endDateChange" style="width:100%">
                                        </el-date-picker>
                                    </el-col>
                                </el-row>              
                            </el-form-item>
                        </el-col>
                        <el-col :span="3" :offset="14">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="submit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
            <div slot="table">
                <div class="table-title"><exportExcel @ee="exportExcel()"></exportExcel></div> 
                <el-table  border style="width: 100%" :data="AnnounceList" v-loading="loading"  @sort-change="sortChange">
                    <el-table-column align="center"  label="年级">
                            <template scope="scope">
                                <span>{{ scope.row.tag | isNull }}</span>
                            </template>
                    </el-table-column>
                    <el-table-column align="center"  label="科目">
                            <template scope="scope">
                                <span>{{ scope.row.subject | isNull }}</span>
                            </template>
                    </el-table-column>
                    <el-table-column align="center"  label="课本">
                            <template scope="scope">
                                <span>{{ scope.row.userName | isNull }}</span>
                            </template>
                    </el-table-column>
                    <el-table-column align="center" sortable="custom" label="布置人数" prop="releaseHomeWorkBtnUser">
                            <template scope="scope">
                                <span>{{ scope.row.releaseHomeWorkBtnUser | isNull }}</span>
                            </template>
                    </el-table-column>
                    <el-table-column align="center" sortable="custom" label="布置次数" prop="releaseHomeWorkBtnNumber">
                            <template scope="scope">
                                <span>{{ scope.row.releaseHomeWorkBtnNumber | isNull }}</span>
                            </template>
                    </el-table-column>
                    <el-table-column align="center" label="提交人数">
                            <template scope="scope">
                                <span>{{ scope.row.commitHomeWorkUser | isNull }}</span>
                            </template>
                    </el-table-column>
                    <el-table-column align="center" label="提交次数">
                            <template scope="scope">
                                <span>{{ scope.row.commitHomeWorkNumber | isNull }}</span>
                            </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container" style="text-align:right">
                    <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" 
                    :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import exportExcel from 'components/ExportExcel/index'; 
    import moment from 'moment';
    import {listSubject, listGraduate, getEdition} from 'api/common';
    import { pageEditor } from 'api/manageAnalysis';
    export default{
        components: {exportExcel, echartsLayout},
        data() {
            return {
                formState: false,
                dataListState: true,
                eCharts1State: true,
                eCharts2State: true,
                eCharts3State: true,
                chartsListState: true,
                tableState: false,
                formInline: {
                    subject: '',
                    grade: '',
                    edition: '',
                    giveTimeStart: '',
                    giveTimeEnd: '',
                    pickerOptions1: {
                        disabledDate(time) {
                            return (time.getTime()) > (Date.now());
                        }
                    },
                    pickerOptions2: {
                        disabledDate(time) {
                            return (time.getTime()) > (Date.now());
                        }
                    }
                },
                loading: true,
                AnnounceList: [],
                listQuery: {
                    page: 1,
                    total: 0
                },
                gradeArr: [],
                bookArr: [],
                subjectArr: [],
                peopleNumState: '1',
                numState: ''
            }
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        created() {
            this.getListGraduate();// 查询年级
            this.getListSubject();// 查询科目
            this.searchFetchData();
        },
        methods: {
            // 全局获取行数
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.listQuery.page = 1;
                this.ChangePageSize(val);
                this.searchFetchData();
            },
            handleCurrentChange(val) {
                this.listQuery.page = val;
                this.searchFetchData();
            },
            sortChange({ column, prop, order }) {
                this.peopleNumState = prop != 'releaseHomeWorkBtnUser'?'':order=='ascending'?'0':'1';
                this.numState = prop != 'releaseHomeWorkBtnNumber'?'':order=='ascending'?'0':'1';
                this.searchFetchData();
            },
            submit() {
                this.listQuery.page = 1;
                this.searchFetchData();
            },
            // 查询年级
            getListGraduate() {
                listGraduate().then(res => {
                    this.gradeArr=res.data.content;
                    this.gradeArr.unshift({name: '请选择', code: ''})
                })
            },
            // 查询科目
            getListSubject() {
                listSubject().then(res => {
                    this.subjectArr=res.data.content;
                    this.subjectArr.unshift({summaryCode: '', summaryName: '请选择'})
                });
            },
            
            // 年级改变时
            changeGrade(val) {
                this.bookArr=[];
                this.formInline.edition='';
                this.getEditionList();

            },
            // 科目改变时
            changeSubject(val) {
                this.bookArr=[];
                this.formInline.edition='';
                this.getEditionList();
            },

            // 查询教材
            getEditionList() {
               
                if (this.formInline.subject && this.formInline.grade) {
                    getEdition(this.formInline.subject, this.formInline.grade).then(res => {
                        this.bookArr=res.data.content;
                        this.bookArr.unshift({textBookId: '', textBook: '请选择'})
                    })
                }
            },
            searchFetchData() {
              
                let numStatus = this.numState; // "1"（必填默认按布置次数倒序，升序“0”降序“1”）,
                let peopleNumStatus = this.peopleNumState; // "0"(布置人数排序),
                let grade = this.formInline.grade; // "年级id",
                let subjectId = this.formInline.subject; // "科目id",
                let editionId = this.formInline.edition;  // "教材id"   
                let startTime = this.formInline.giveTimeStart?moment(new Date(this.formInline.giveTimeStart)).format('YYYY-MM-DD'):'';
                let endTime = this.formInline.giveTimeEnd?moment(new Date(this.formInline.giveTimeEnd)).format('YYYY-MM-DD'):'';
                this.loading = true;
                pageEditor(this.listQuery.page, this.config.pageSize, numStatus, peopleNumStatus, grade, subjectId, editionId, startTime, endTime).then(res => {
                    this.loading = false;
                    this.AnnounceList = res.data.content.list;
                    this.listQuery.total = res.data.content.pagination.total;
                }).catch(() => {
                    this.loading = false;
                });
            },
            exportExcel() {
                let numStatus = this.numState; // "1"（必填默认按布置次数倒序，升序“0”降序“1”）,
                let peopleNumStatus = this.peopleNumState; // "0"(布置人数排序),
                let grade = this.formInline.grade; // "年级id",
                let subjectId = this.formInline.subject; // "科目id",
                let editionId = this.formInline.edition;  // "教材id"   
                let startTime = this.formInline.giveTimeStart?moment(new Date(this.formInline.giveTimeStart)).format('YYYY-MM-DD'):'';
                let endTime = this.formInline.giveTimeEnd?moment(new Date(this.formInline.giveTimeEnd)).format('YYYY-MM-DD'):'';
                window.location.href = `${LOCAL_API.cm}/report/exportEditor?numStatus=${numStatus}&peopleNumStatus=${peopleNumStatus}&grade=${grade}&subjectId=${subjectId}&editionId=${editionId}&startTime=${startTime}&endTime=${endTime}`; 
            },
            startDateChange(date) {
                this.formInline.pickerOptions2 = {
                    disabledDate(time) {
                        return (time.getTime() < (new Date(date).getTime() - 864e5)) || (time.getTime() > new Date().getTime());
                    }
                }
            },
            endDateChange(date) {
                if (date) {
                    this.formInline.pickerOptions1 = {
                        disabledDate(time) {
                            return (time.getTime() > new Date(date).getTime());
                        }
                    } 
                } else {
                    this.formInline.pickerOptions1 = {
                        disabledDate(time) {
                            return (time.getTime()) > (Date.now());
                        }
                    }
                }
            }
        }
    }
</script>
                  